<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<style>
		table{height:492px;}
		</style>
	</head>
	<body>
		<table class="table table-striped table-inverse row text-center mx-0">
			<thead class="col-md-12">
				<tr class="row mx-0">
					<th class="col-1 text-center">编号</th>
					<th class="col-1 text-center">姓名</th>
					<th class="col-1 text-center">绰号</th>
					<th class="col-1 text-center">门派</th>
					<th class="col-1 text-center">生平</th>
					<th class="col-1 text-center">内功</th>
					<th class="col-1 text-center">轻功</th>
					<th class="col-1 text-center">武功</th>
					<th class="col-1 text-center">武功</th>
					<th class="col-1 text-center">武功</th>					
					<th class="col-1 text-center">左手</th>
					<th class="col-1 text-center">右手</th>
					
				</tr>
			</thead>
			<tbody class="col-md-12">
				<tr class="row mx-0" id="template">
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
					<td class="col-1 text-center"></td>
				</tr>
			</tbody>
		</table>
		<nav aria-label="...">
		  <ul class="pagination justify-content-end">
			<li class="page-item disabled">
			  <span class="page-link">Previous</span>
			</li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item active">
			  <span class="page-link">
				2
				<span class="sr-only">(current)</span>
			  </span>
			</li>
			<li class="page-item"><a class="page-link" href="#">3</a></li>
			<li class="page-item">
			  <a class="page-link" href="#">Next</a>
			</li>
		  </ul>
		</nav>
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="jquery-3.2.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
		$.when($.ajax("http://localhost:9090/menpai",{type:"get"}),$.ajax("http://localhost:9090/weapon",{type:"get"}),$.ajax("http://localhost:9090/kungfu",{type:"get"}),$.ajax("http://localhost:9090/hero",{type:"get"}))
			.done(function(r1,r2,r3,r4){
				menpai = r1[0].map;
				weapon = r2[0].map;
				kungfu = r3[0].map;
				hero = r4[0].list;
				$("#template").hide();
				for(var i = 0; i < hero.length; i++){
					var tr = $("#template").clone().removeAttr("id");
					tr.find("td:eq(0)").text(hero[i].id);
					tr.find("td:eq(1)").text(hero[i].name);
					tr.find("td:eq(2)").text(hero[i].title);
					tr.find("td:eq(3)").text(menpai[hero[i].menpai].name);
					tr.find("td:eq(4)").text(hero[i].description);
					tr.find("td:eq(5)").text(kungfu[hero[i].neigong].name);
					tr.find("td:eq(6)").text(kungfu[hero[i].qinggong].name);
					tr.find("td:eq(7)").text(kungfu[hero[i].zhaoshu1].name);
					tr.find("td:eq(8)").text(kungfu[hero[i].zhaoshu2].name);
					tr.find("td:eq(9)").text(kungfu[hero[i].zhaoshu3].name);
					tr.find("td:eq(10)").text(weapon[hero[i].hand1].name);
					tr.find("td:eq(11)").text(weapon[hero[i].hand2].name);
					//tr.find("td:eq(12)").text(hero[i].photo);
					$("tbody").append(tr);
					queue(tr);
				}
				animates.dequeue("showtr");
			});
			
		var animates = $({});
		function queue(tr){
			animates.queue("showtr",function(){ tr.show(1500); animates.dequeue("showtr"); }).delay(25,"showtr");
		}
		function queueHide(tr){
			animates.queue("hidetr",function(){ tr.hide(1500); animates.dequeue("hidetr"); }).delay(25,"hidetr");
		}
		
		$("a").click(function(){
			var trs = $("tbody tr:not(#template)");
			for(var i = 0; i < trs.length; i++) {
				queueHide($(trs[i]));
			}
			animates.dequeue("hidetr");
		});
		</script>
	</body>
</html>